<template>
    <div class="city">
        <city-head title="城市选择"></city-head>
        <search :city-list="cityList" @click="selectCity"></search>
        <div class="address">
            <p>你的位置</p>
            <div>
                <router-link to="" @click="selectCity(this.$store.state.city)">{{this.$store.state.city}}</router-link>
            </div>
        </div>
        <hot-city :hot-city-list="hotCityList" @click="selectCity"></hot-city>
        <city-list :city-list="cityList" :list-num="listNum" @click="selectCity"></city-list>
        <p class="no-more">没有更多</p>
    </div>
</template>

<script>
    import axios from "axios"
    import CityHead from "../core/cityhead";
    import HotCity from "./hotcity";
    import CityList from "./citylist";
    import Search from "./search";
    export default {
        components: {
            CityHead,
            HotCity,
            CityList,
            Search

        },
        name: "city",
        data() {
            return {
                hotCityList: [
                    {city: '北京', href: '/bj'},
                    {city: '上海', href: '/sh'},
                    {city: '广东', href: '/gd'},
                    {city: '广东', href: '/gd'},
                    {city: '广东', href: '/gd'},
                    {city: '广东', href: '/gd'},
                    {city: '广东', href: '/gd'},
                    {city: '广东', href: '/gd'}
                ],
                cityList: {},
                listNum:[]
            }
        },
        methods: {
            getCityJson() {
                axios.get('/api/citys.json').then((req) => {
                    Object.assign(this.cityList, req.data.data.cities)
                    for (var key in this.cityList) {
                        this.listNum.push(key)
                    }
                })
            },
            selectCity(city){
                this.$store.commit('selectCity',city)
                this.$router.push('/')
            }
        },
        created(){
            this.getCityJson()
        }
    }
</script>

<style lang="scss" scoped>
    @import "~css/varibles.scss";
    .city {
        .address {
            > p {
                padding: .24rem 0 .24rem .2rem;
                background-color: $bgcolor-p;
                border-bottom: #dadada 1px solid;
            }

            > div {
                padding: 0 .24rem;

                a {
                    margin: .3rem 0;
                    line-height: .4rem;
                    display: block;
                    width: 30%;
                    border: 1px solid $bgcolor;
                    border-radius: .08rem;
                    text-align: center;
                }
            }
        }
        .no-more {
            padding: .3rem 0;
            text-align: center;
            color: #d3d3d3;
        }
    }
    .absolute{
        position: absolute;
        overflow: hidden;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }
</style>
